<div class="chaosu-wrap" id="linkage-alarm">
    <Modal v-model="ruleModal" width="650">
        <p slot="header" style="color:#f60;text-align: center;">
            <span>{{$t('rule.addLinkAlarm')}}</span>
        </p>
        <Row style="margin: 5px 0">
            <i-col span="9" style="height: 320px;overflow-y: auto;">
                <div v-for="(item,index) in alarmTypeList" :key="index">
                    <Checkbox v-model="checkboxObj[index]">{{isZh ? item.alarmname : item.alarmnameen}}</Checkbox>
                </div>
            </i-col>
            <i-col span="15" style="height: 320px;">
                <Row style="margin: 5px 0">
                    <i-col span="5" :offset="1" style="height: 100%;text-align:right;line-height:32px;">{{$t('rule.ruleName')}} :</i-col>
                    <i-col span="17" :offset="1">
                        <i-input v-model.trim="ruleName"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 5px 0">
                    <i-col span="5" :offset="1" style="height: 100%;text-align:right;line-height:32px;">{{$t('rule.photograph')}} :</i-col>
                    <i-col span="5" :offset="1" style="height: 100%;line-height:32px;">
                        <Checkbox v-model='isCapture'></Checkbox>
                    </i-col>
                    <i-col span="5" :offset="1" style="height: 100%;text-align:right;line-height:32px;">{{$t('rule.alarm')}} :</i-col>
                    <i-col span="5" :offset="1" style="height: 100%;line-height:32px;">
                        <Checkbox v-model='isReportalarm'></Checkbox>
                    </i-col>
                </Row>
                <Row style="margin: 5px 0" v-if="isCapture">
                    <i-col span="5" :offset="1" style="height: 100%;text-align:right;line-height:32px;">{{$t('rule.photographCount')}} :</i-col>
                    <i-col span="5" :offset="1">
                        <Input-Number :max="100" :min="0" style="width: 100%;" v-model="piccount"></Input-Number>
                    </i-col>
                    <i-col span="5" :offset="1" style="height: 100%;text-align:right;line-height:32px;">{{$t('rule.photoInterval')}} :</i-col>
                    <i-col span="5" :offset="1">
                        <Input-Number :max="100" :min="0" v-model="takeinterval" :formatter="value => `${value}分`" :parser="value => value.replace('分', '')" style="width: 100%;"></Input-Number>
                    </i-col>
                </Row>
                <Row style="margin: 5px 0" v-if="isCapture">
                    <i-col span="5" :offset="1" style="height: 100%;text-align:right;line-height:32px;">{{$t('rule.camera')}} :</i-col>
                    <i-col span="17" :offset="1">
                        <Checkbox-Group v-model="caramers">
                            <Checkbox label="0"><span>1</span></Checkbox>
                            <Checkbox label="1"><span>2</span></Checkbox>
                            <Checkbox label="2"><span>3</span></Checkbox>
                            <Checkbox label="3"><span>4</span></Checkbox>
                            <Checkbox label="4"><span>5</span></Checkbox>
                            <Checkbox label="5"><span>6</span></Checkbox>
                            <Checkbox label="6"><span>7</span></Checkbox>
                            <Checkbox label="7"><span>8</span></Checkbox>
                        </Checkbox-Group>
                    </i-col>
                </Row>
                <Row style="margin: 5px 0">
                    <i-col span="5" :offset="1" style="height: 100%;text-align:right;line-height:32px;">{{$t('rule.voiceSettings')}} :</i-col>
                    <i-col span="17" :offset="1" style="height: 100%;line-height:32px;">
                        <Checkbox-Group v-model="ttstypes">
                            <Checkbox label="0"><span>{{$t('rule.urgent')}}</span></Checkbox>
                            <Checkbox label="2"><span>{{$t('rule.monitorDisplay')}}</span></Checkbox>
                            <Checkbox label="3"><span>{{$t('rule.tts')}}</span></Checkbox>
                            <Checkbox label="4"><span>{{$t('rule.advertisingScreenDisplay')}}</span></Checkbox>
                        </Checkbox-Group>
                    </i-col>
                </Row>
                <Row style="margin: 5px 0">
                    <i-col span="5" :offset="1" style="height: 100%;text-align:right;line-height:32px;">{{$t('rule.voicePrompt')}} :</i-col>
                    <i-col span="17" :offset="1">
                        <i-input v-model.trim="ttscontent"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 5px 0">
                    <i-col span="23" :offset="1">
                        <div>{{$t('rule.overSpeedTips5')}}</div>
                    </i-col>
                </Row>
            </i-col>
        </Row>
        <p slot="footer">
            <i-button type="primary" @click="onSettingRule" style="width:100%;">{{$t('rule.confirm')}}</i-button>
        </p>
    </Modal>
    <rule-allocation :modal="allocationModal" @close-model="onClose" ref="ruleAllocation"></rule-allocation>
    <div class="rule-header">
        <ul>
            <li style="float: left;">{{$t('rule.ruleName')}} :</li>
            <li style="float: left;">
                <i-input v-model.trim="sosoValue"></i-input>
            </li>
            <li style="float: left;">
                <i-button type="primary" @click="queryRuleDefines" icon="md-search">{{$t('reportForm.query')}}</i-button>
            </li>
            <li style="float: right;">
                <i-button @click="allocationModal=true" icon="md-settings" type="warning">{{$t('rule.ruleAllocation')}}</i-button>
            </li>
            <li style="float: right;">
                <i-button @click="deleteRule" icon="md-remove" type="error">{{$t('monitor.delete')}}</i-button>
            </li>
            <li style="float: right;">
                <i-button @click="exitRule" icon="md-create" type="info">{{$t('rule.modify')}}</i-button>
            </li>
            <li style="float: right;">
                <i-button @click="addRule" icon="md-add" type="success">{{$t('rule.add')}}</i-button>
            </li>
        </ul>
    </div>
    <div class="rule-table">
        <i-table :columns="columnsList" highlight-row :data="tableData" :height="taleHeight" @on-current-change="onCurrentChange" @on-row-dblclick="onDblclickCurrentChange" :loading="loading"></i-table>
    </div>

    <script>
        vueInstanse = new Vue({
            el: "#linkage-alarm",
            i18n: utils.getI18n(),
            data: {
                isZh: isZh,
                ruleName: '',
                piccount: 1,
                isReportalarm: false,
                isCapture: false, // 是否拍照
                takeinterval: 8,
                ttscontent: '',
                ttstypes: [],
                caramers: [],
                ruleModal: false,
                allocationModal: false,
                loading: false,
                sosoValue: '',

                alarmTypeList: deepClone(alarmTypeList),
                checkboxObj: {},
                columnsList: [{
                    width: 60,
                    type: 'index'
                }, {
                    title: vRoot.$t('rule.ruleName'),
                    key: 'rulename'
                }, {
                    title: vRoot.$t('rule.photographCount'),
                    key: 'piccount'
                }, {
                    title: vRoot.$t('rule.camera'),
                    render: function(h, params) {
                        var arr = [];
                        var caramers = params.row.caramers;
                        utils.longToBits(Number(caramers), 8).reverse().forEach(function(item, index) {
                            if (item) {
                                arr.push(String(index + 1));
                            }
                        });
                        return h('span', {}, arr.join(','));
                    },
                }, {
                    title: vRoot.$t('rule.voicePrompt'),
                    key: 'ttscontent'
                }, {
                    title: vRoot.$t('rule.voicePromptType'),
                    key: 'ttstypesStr'
                }, {
                    title: vRoot.$t('rule.alarm'),
                    render: function(h, params) {
                        var reportalarm = params.row.reportalarm;
                        if (reportalarm == '1') {
                            return h('span', {}, vRoot.$t('header.yes'));
                        } else {
                            return h('span', {}, vRoot.$t('header.no'));
                        }
                    },
                }, {
                    title: vRoot.$t('rule.createTime'),
                    key: 'createtimeStr',
                    width: 148,
                }],
                tableData: [],
            },
            methods: {
                onClose: function(e) {
                    this.allocationModal = e;
                },
                addRule: function() {
                    this.isAddRule = true;
                    this.ruleName = '';
                    this.ttscontent = '';
                    for (var key in this.checkboxObj) {
                        this.checkboxObj[key] = false;
                    }
                    this.caramers = [];
                    this.ttstypes = [];
                    this.isReportalarm = false;
                    this.isCapture = false;
                    this.ruleModal = true;
                },
                deleteRule: function() {
                    if (this.selectedRow) {
                        var me = this;
                        this.$Modal.confirm({
                            title: vRoot.$t('rule.titleTipi'),
                            content: vRoot.$t('rule.contentTipi'),
                            onOk: function() {
                                var ruledefineid = me.selectedRow.ruledefineid;
                                console.log('ruledefineid', ruledefineid)
                                var url = myUrls.deleteRuleDefine();
                                utils.sendAjax(url, {
                                    ruledefineid: ruledefineid
                                }, function(resp) {
                                    if (resp.status == 0) {
                                        var index = 0;
                                        me.tableData.forEach(function(item, index) {
                                            if (item.ruledefineid == ruledefineid) {
                                                index = index;
                                                return false;
                                            }
                                        });
                                        me.tableData.splice(index, 1);
                                        me.selectedRow = null;
                                        me.$refs.ruleAllocation.init();
                                    } else {
                                        me.$Message.error(vRoot.$t('message.deleteFail'));
                                    }
                                })
                            }
                        });
                    } else {
                        this.$Message.error(vRoot.$t('rule.selectedRule'))
                    }
                },
                onDblclickCurrentChange: function(row) {
                    this.selectedRow = row;
                    this.exitRule();
                },
                exitRule: function() {
                    if (this.selectedRow) {
                        this.isAddRule = false;
                        var row = this.selectedRow;
                        this.ruleName = row.rulename;
                        this.takeinterval = row.takeinterval;
                        this.piccount = row.piccount;
                        this.ttscontent = row.ttscontent;

                        var ttstypes = [];
                        utils.longToBits(Number(row.ttstypes), 8).reverse().forEach(function(item, index) {
                            if (item) {
                                ttstypes.push(String(index));
                            }
                        });
                        this.ttstypes = ttstypes;
                        var caramers = [];
                        utils.longToBits(Number(row.caramers), 8).reverse().forEach(function(item, index) {
                            if (item) {
                                caramers.push(String(index));
                            }
                        });
                        this.caramers = caramers;
                        this.isReportalarm = row.reportalarm == 1;
                        this.isCapture = row.takepic == 1;
                        var checkboxObj = {};
                        var needAlarm = row.needalarmstr;
                        console.log('row.needalarmstr', row.needalarmstr);
                        for (var i = 0; i < 63; i++) {
                            checkboxObj[i] = needAlarm.charAt(i) == '1' ? true : false;
                        }
                        this.checkboxObj = checkboxObj;

                        this.ruleModal = true;
                    } else {
                        this.$Message.error(vRoot.$t('rule.selectedRule'))
                    }
                },
                onCurrentChange: function(row) {
                    this.selectedRow = row;
                },
                getCaramers: function(caramers) {
                    var arrBits = new Array(8).fill(false);
                    caramers.forEach(function(item) {
                        var index = Number(item);
                        arrBits[index] = true;
                    })
                    return utils.bitsToULong(arrBits.reverse());
                },
                getTtstypes: function(ttstypes) {
                    var arrBits = new Array(8).fill(false);
                    ttstypes.forEach(function(item) {
                        var index = Number(item);
                        arrBits[index] = true;
                    })
                    return utils.bitsToULong(arrBits.reverse());
                },
                getNeedAlarm: function(checkboxObj) {
                    var arrBits = '';
                    var checkboxObj = this.checkboxObj;
                    for (var i = 0; i < 63; i++) {
                        var val = checkboxObj[i];
                        if (val) {
                            arrBits += '1'
                        } else {
                            arrBits += '0';
                        }
                    }
                    return arrBits;
                },
                onSettingRule: function() {


                    if (this.ruleName.trim() == '') {
                        this.$Message.error(vRoot.$t('rule.addRuleTips'));
                        return;
                    }

                    if (this.isAddRule) {
                        var url = myUrls.addRuleDefine();
                    } else {
                        var url = myUrls.editRuleDefine();
                    }
                    var me = this;
                    var ruleparam = {};
                    ruleparam.caramers = this.getCaramers(this.caramers);
                    ruleparam.ttstypes = this.getTtstypes(this.ttstypes);
                    ruleparam.takepic = this.isCapture ? 1 : 0;
                    ruleparam.reportalarm = this.isReportalarm ? 1 : 0;
                    ruleparam.piccount = this.piccount;
                    ruleparam.takeinterval = this.takeinterval;
                    ruleparam.ttscontent = this.ttscontent;
                    ruleparam.needalarmstr = this.getNeedAlarm();
                    var ruleparamjson = JSON.stringify(ruleparam);

                    if (this.isAddRule) {
                        var data = {
                            ruletype: ruleTypes.liandong,
                            rulename: this.ruleName,
                            ruleparamjson: ruleparamjson,
                        }
                        utils.sendAjax(url, data, function(resp) {
                            if (resp.status === 0) {
                                me.$Message.success(vRoot.$t('message.addSucc'));
                                me.ruleModal = false;
                                me.queryRuleDefines();
                                me.$refs.ruleAllocation.init();
                            } else {
                                me.$Message.error(vRoot.$t('message.addFail'));
                            }
                        });
                    } else {
                        var data = {
                            offset: timeDifference,
                            ruletype: ruleTypes.liandong,
                            rulename: this.ruleName,
                            ruleparamjson: ruleparamjson,
                            ruledefineid: me.selectedRow.ruledefineid
                        }
                        utils.sendAjax(url, data, function(resp) {
                            if (resp.status === 0) {
                                me.$Message.success(vRoot.$t('message.changeSucc'));
                                me.ruleModal = false;
                                me.queryRuleDefines();
                            } else {
                                me.$Message.error(vRoot.$t('message.changeFail'));
                            }
                        });
                    }

                },
                queryRuleDefines: function() {
                    this.selectedRow = null;
                    var me = this;
                    var url = myUrls.queryRuleDefines();
                    var data = {
                        ruletype: ruleTypes.liandong,
                    }
                    me.loading = true;
                    utils.sendAjax(url, data, function(resp) {
                        me.loading = false;
                        console.log(resp);
                        if (resp.status == 0 && resp.records) {
                            var tableData = [];
                            resp.records.forEach(function(item, index) {
                                var rulename = item.rulename;
                                var ruleItem = JSON.parse(item.ruleparam);
                                ruleItem.ttstypesStr = me.getTtstypesStr(ruleItem.ttstypes);
                                ruleItem.rulename = rulename;
                                ruleItem.ruledefineid = item.ruledefineid;
                                ruleItem.createtimeStr = DateFormat.longToLocalDateTimeStr(item.createtime);
                                tableData.push(ruleItem);
                            })
                            me.tableData = tableData;
                        }
                    });
                },
                getTtstypesStr: function(ttstypes) {
                    var str = '';
                    if (ttstypes) {
                        var ttstypes = utils.longToBits(Number(ttstypes), 8).reverse();
                        var ttsShowStr = [vRoot.$t('rule.urgent'), "", vRoot.$t('rule.monitorDisplay'), vRoot.$t('rule.tts'), vRoot.$t('rule.advertisingScreenDisplay'), "", "", ""];
                        ttstypes.forEach(function(type, index) {
                            if (type) {
                                str += ttsShowStr[index] + " ";
                            }
                        });
                    }
                    return str;
                }
            },
            mounted: function() {
                this.isAddRule = true;
                this.queryRuleDefines();
            },
            created: function() {
                var checkboxObj = {};
                new Array(64).fill(false).forEach(function(item, index) {
                    checkboxObj[index] = item;
                });
                this.checkboxObj = checkboxObj;
            },
            mixins: [ruleMixIn],
        })
    </script>
</div>